<template>
	<view>
		<view class="avatar" style="display: flex;justify-content: center;">
			<image :src="src" mode="" class="image" alt=""></image>
			<text class="text" @click="uploadImage">点我上传</text>
		</view>
		<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
			<uni-forms-item label="手机号" required name="tel">
				<uni-easyinput v-model="valiFormData.tel" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="昵称" required name="nickname">
				<uni-easyinput v-model="valiFormData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="账号" required name="username">
				<uni-easyinput v-model="valiFormData.username" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput v-model="valiFormData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="handClick">提交</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const valiForm = ref()
	const src = ref('')
	const uploadImage = () => {
		uni.chooseImage({
			success: resp => {
				const url = resp.tempFilePaths[0]
				src.value = url
			}
		})
	}
	const rules = {
		username: {
			rules: [{
				required: true,
				errorMessage: '用户名不可以为空'
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '密码不可以为空'
			}]
		}
	}
	const valiFormData = ref({
		username: '',
		password: '',
		tel: '',
		nickname: '',
	})
	const handClick = () => {
		valiForm.value.validate()
			.then(() => {
				uniCloud.database().collection('user').add({
					"nickname": valiFormData.value.nickname,
					"avatar": src.value,
					"tel": valiFormData.value.tel,
					"username": valiFormData.value.username,
					"password": valiFormData.value.password
				})
			})
			.catch(() => {})
	}
</script>

<style lang="scss">
	.avatar {
		position: relative;

		.image {
			width: 400rpx;
			height: 400rpx;
			border-radius: 50%;
			border: 1px solid #ccc;
			margin: 20rpx auto;
			transition: all 2s;
			&:hover {
				transform: rotateZ(360deg);
			}
		}

		.text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>